<template>
<div class="publish" ref="publish">
    <scroll ref="scroll"class="recommend-content":data="discList">
     <div>
        <ul class="list" v-if="discList.length">
             <li  v-for="(item, index) in discList" class="list-item">
                <div class="publish-left">
                    <div class="publish-head">
                          <img v-lazy="item.avatar" width="60" height="60" alt="" />
                    </div>
                </div>
                <div class="publish-right">
                    <div class="publish-body">
                       <div class="name"v-html="item.weixin_name"></div>
                       <div class="time"v-html="item.publish_time"></div>
                       <div class="desc" v-html="item.desc"></div>
                          <!-- <li class="img-wrapper" v-for="(pic,index) in item.picurl_list">
                          <img v-lazy="pic.src" alt=""   @click="clickImg($event)"/>
                          </li> -->
                          <previewer :lists="item.picurl_list"></previewer>

                      <div class="buttons">
                          <span class="icon-heart"v-bind:class="favor? classA : ''"v-html="add?item.favor_count:item.favor_count+1"@click="changeFavor" ref="favor_count"></span>
                          <span class="icon-bubble" @click="toggleShow(index)" ></span>
                      </div>
                     <div><comment :isShow="isShow" :comments="item.comments" ref="comment"></comment></div>
                    </div>
                </div>
            </li>
        </ul>
        </div>
       </scroll>
      <preview v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc" ></preview>
</div>
</template>
<script type="text/ecmascript-6">
    import {ERR_OK} from 'api/config'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import Comment from 'base/comment/comment'
    import Preview from 'base/preview/preview'
    import Previewer from 'base/previewer/previewer'

    export default {
      data () {
        return {
          discList: [],
          textarea: ' ',
          favor: false,
          classA: 'icon_red',
          add: true,
          isShow: true,
          showImg: false,
          imgSrc: ''
        }
      },
      created () {
        let url = 'http://120.132.148.73/vshop/mshop/Home/getShopPublishList?access_token=21f56fd0fccbd615ccc010b8a41fd81d&wx_id=7'
        this.$http.get(url).then((res) => {
          console.log(res)
          if (res.data.code === ERR_OK) {
            this.discList = res.data.data
            console.log(res.data)
          }
        })
      },
      methods: {
        loadImage () {
          if (!this.checkLoaded) {
            this.checkLoaded = true
            console.log(this.checkLoaded)
            this.$refs.scroll.refresh()
            console.log(this.$refs.scroll.offsetHeight)
          }
        },
        changeFavor () {
          if (this.favor === true) {
            this.favor = false
            this.add = true
          } else {
            this.favor = true
            this.add = false
          }
        },
        toggleShow () {
          this.isShow = false
        },
        clickImg (e) {
          this.showImg = true
          this.imgSrc = e.currentTarget.src
          console.log(this.imgSrc)
        },
        viewImg () {
          this.showImg = false
          console.log(this.showImg)
        }
      },
      components: {
        Scroll,
        Loading,
        Comment,
        Preview,
        Previewer
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
@import "~common/stylus/variable"
  .publish
    position: fixed
    width: 100%
    top: 184px
    bottom: 48px
    .recommend-content
      height:100%
      overflow:hidden
      div
        &>.list
          position:relative
          &>.list-item
            position:relative
            padding:10px
            background:#fff
            display:flex
            .publish-left
              flex:0 0 66px
              .publish-head
                height: 0px
                padding-bottom: 56px
                overflow: hidden
                border-radius: 50%
                width: 56px
                &>img
                  width:56px
                  min-height:56px
            .publish-right
              flex:1
              .publish-body
                color: #333
                .name
                  position:relative
                  padding-bottom: 5px
                .time
                  color: $color-text-cc
                  font-size: $font-size-small
                  padding-bottom: 5px
                .desc
                  color: $color-text-c
                  font-size: $font-size-small
                &>div>ul
                  position: relative
                  padding-top: 5px
                  font-size:0
                  &>li
                    display: inline-block
                    height: 0px
                    padding-bottom: 80px
                    overflow: hidden
                    width: 80px
                    margin: 5px 5px 0 0
                    &>img
                      width:80px
                      min-height:80px
                .buttons
                  clear: both
                  text-align: right
                  color: #999
                  width:86%
                  padding: 20px 30px 10px 0
                  .icon-heart
                    padding-right: 10px
                    font-size: 18px
                  .icon_red
                    color:red
                  .icon-bubble
                    font-size: 18px
                .input
                  width:86%
                  button
                    float:right
                    margin-top:10px
</style>

